<!--动态详情-->
<template>
    <div class="body-bac-container">
        <div class="dynamic-details container">
            <div class="dynamic-container-operate">
                <ul>
                    <li @click="addLike" :class="dynamic.likeId != null ? 'is_active' : ''"><i class="el-icon-third-good-fill" ></i><span>{{dynamic.likeQuantity}} 赞</span></li>
                    <li @click="showComment"><i class="el-icon-third-comments-fill" ></i><span>{{dynamic.commentQuantity}} 评论</span></li>
                    <li @click="addCollection" :class="dynamic.collectionId != null ? 'is_active' : ''"><i class="el-icon-third-collection-fill" ></i><span>{{dynamic.collectionId != null ? '取消' : '收藏'}}</span></li>
                    <li><i class="el-icon-third-resonserate-fill"></i><span>{{dynamic.shareQuantity}} 分享</span></li>
                </ul>
            </div>
            <!--左边-->
            <el-row>
                <el-col :span="17" class="col-left">
                    <div class="bac-container dynamic-details-container" v-loading="loading">
                        <!--动态内容-->
                        <div class="dynamic-details-container-body">
                            <div class="dynamic-title">
                                <el-tag type="warning" size="mini" effect="plain" v-if="dynamic.typeName">
                                    {{dynamic.typeName}}
                                </el-tag>
                                {{dynamic.title}}
                            </div>
                            <div class="dynamic-basic-data">
                                    <span class="dynamic-basic-data-avatar">
                                        <el-avatar :size="20" :src="dynamic.userHeadUrl"></el-avatar>
                                    </span>
                                <span class="dynamic-username">{{dynamic.userRealName}}</span>
                                <span>{{dynamic.createTime |  formatDate}} </span>
                                <span>行业: <el-link href="/"
                                                   :underline="false">{{dynamic.industryCategory}}</el-link></span>
                            </div>
                            <div class="goods-item-attribute" v-if="dynamic.attributeList && dynamic.attributeList.length > 0">
                                <!--表格-->
                                <ul>
                                    <li v-for="(attribute,index) in dynamic.attributeList">
                                        <span class="attribute-name">{{attribute.name != undefined ? attribute.name + ':' : ''}}</span>
                                        <span class="attribute-value"><el-link
                                                :underline="false">{{attribute.value}}{{attribute.unit}}</el-link></span>
                                    </li>
                                </ul>
                            </div>

                            <div class="dynamic-context mce-content-body" v-html="dynamic.content" id="dynamic-context"></div>

                        </div>
                        <div class="bac-container-title">赞和喜欢</div>
                        <div class="good-container">
                            <ul>
                                <li><i class="el-icon-third-fill-good"></i></li>
                                <li v-for="(likeUser,index) in likeUserList" :key="likeUser.userId">
                                    <el-link>{{likeUser.userRealName}}</el-link>
                                    <span v-if="index> 0 && index != likeUserList.length -1 ">,</span>
                                </li>
                            </ul>
                        </div>
                        <!--评论框-->
                        <div class="bac-container-title">评论</div>

                        <div class="comment-add">
                            <ul>
                                <li>
                                    <el-avatar :size="32"
                                               :src="userInfo.headUrl"></el-avatar>
                                </li>
                                <li>
                                    <el-input placeholder="请输入内容" size="small" type="text" v-model="commentContent"/>
                                </li>
                                <li>
                                    <el-button size="small" type="primary" @click="addComment(0)">评论</el-button>
                                </li>
                                <li>
                                    <el-button size="small" type="primary" @click="addComment(1)">私密评论</el-button>
                                </li>
                            </ul>
                        </div>
                        <div class="comment " id="comment">
                            <div>
                                <ul class="comment-body">
                                    <li class="comment-item" v-for="comment in commentList" :key="comment.id">
                                        <p class="comment-context">
                                            <span>
                                                <el-link type="primary"
                                                         :underline="false">{{comment.userRealName}}</el-link>
                                            </span>
                                            <span v-if="comment.toUserRealName != null">&nbsp;回复&nbsp;
                                             <el-link type="primary"
                                                      :underline="false">{{comment.toUserRealName}}</el-link>
                                    </span>
                                            <span>:</span>
                                            {{comment.content}}
                                        </p>
                                        <!---时间和回复-->
                                        <div class="comment-context-footer">
                                            <p class="comment-time">{{comment.createTime  |  formatDate }}</p>
                                            <p class="comment-operate">
                                                <el-popover ref="popover" placement="bottom-end" width="520" trigger="click">
                                                    <div>
                                                        <ul>
                                                            <li style="width: 87%; float: left;margin-right: 10px">
                                                                <el-input placeholder="请输入内容" v-model="replyCommentContent" size="small" type="text"/>
                                                            </li>
                                                            <li>
                                                                <el-button size="small" type="primary" @click="replyComment(comment.userId)">回复
                                                                </el-button>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <el-link slot="reference">回复</el-link>
                                                </el-popover>
                                                <el-divider direction="vertical"></el-divider>
                                                <el-link>投诉</el-link>
                                            </p>
                                        </div>
                                    </li>
                                </ul>
                                <el-pagination small background :hide-on-single-page="true"
                                               layout="prev, pager, next"
                                               :total="commentPage.count"
                                               :page-size="commentPage.size"
                                               :current-page="commentPage.page"
                                               @current-change="changeCommentPage">
                                </el-pagination>
                            </div>
                        </div>

                    </div>
                </el-col>
                <!--右边-->
                <el-col :span="7" class="col-right">
                    <!--个人信息框-->

                    <div class="bac-container" :class="isFixeds? 'left-sub-fixed':''" v-if="authorUser.realName">
                        <ul class="user-info">
                            <li>
                                <el-avatar :size="50" :src="authorUser.headUrl"></el-avatar>
                            </li>
                            <li class="user-name">{{authorUser.realName}}</li>
                            <li class="user-position" v-if="authorUser.profession">{{authorUser.profession}}</li>
                            <li class="user-company">{{authorUser.company}}</li>
                            <li class="user-data">
                                <div class="user-data-item">
                                    <div>
                                        <el-link :underline="false">{{dataQuantity.dynamicQuantity}}</el-link>
                                    </div>
                                    <div>
                                        <span>动态</span>
                                    </div>
                                </div>
                                <div class="user-data-item">
                                    <el-divider direction="vertical"></el-divider>
                                </div>
                                <div class="user-data-item">
                                    <div>
                                        <el-link :underline="false">{{dataQuantity.friendQuantity}}</el-link>
                                    </div>
                                    <div>
                                        <span>关注</span>
                                    </div>
                                </div>
                                <div class="user-data-item">
                                    <el-divider direction="vertical"></el-divider>
                                </div>
                                <div class="user-data-item">
                                    <div>
                                        <el-link :underline="false">{{dataQuantity.fansQuantity}}</el-link>
                                    </div>
                                    <div>
                                        <span>粉丝</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="left-container bac-container-none-padding" v-if="recommendList.length > 0">
                        <div class="bac-container-title-border">猜你感兴趣</div>
                        <ul class="dynamic-list-mini">
                            <li v-for="(dynamic,index) in recommendList" :key="index"  @click="openDynamicDetails(dynamic.id)">
                                <div class="title-div">
                                    <el-tag type="warning" size="mini" effect="plain" v-if="dynamic.typeName">{{dynamic.typeName}}</el-tag>
                                    <span class="title">{{dynamic.title}}</span>  </div>
                            </li>

                        </ul>
                    </div>
                </el-col>


            </el-row>
        </div>
        <!---预览-->
        <image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="previewImages" :index="previewIndex" />
    </div>
</template>

<script>
    // 导入组件
    import imageViewer from '@/components/image-viewer'
    import {formatDate} from "@/utils/dateUtil"
    import  common from '@/api/common'

    export default {
        components:{
            imageViewer
        },
        filters: {
            formatDate(val) {
                return formatDate(val)
            }
        },
        data: function () {
            return {
                loading:false,
                dynamic: {

                },
                showViewer:false,
                previewIndex:0,
                previewImages: [],
                attributeList: [],
                likeUserList: [],
                commentPage:{ page:1,size:50,count:0},
                commentList: [
                ],
                commentContent:"",
                replyCommentContent:"",
                userInfo:{},
                authorUser:{},//作者
                recommendList: [],
                dataQuantity:{},
                isFixeds: false
            }

        },
        methods:
            {
                getUserInfo() {
                    common.getUserInfo().then((res)=>{
                        this.userInfo = res;
                    }).catch((err) => {
                        sessionStorage.removeItem("token");
                    })
                },
                getAuthorUser(id){
                  this.$post("/user/details/getUserInfoById",{id:id}).then(res =>{
                      this.authorUser = res.data;
                  }).then(()=>{
                      this.$post("/user/dataQuantity/queryListByUserId",{id:id}).then(res =>{
                          this.dataQuantity = res.data
                      })
                  })

                },
                getDetails(){
                    let params = this.$route.query;
                    let id = params.id;
                    this.dynamic.id = id;
                    if(id == null){
                        this.$router.push("dynamic-list")
                        return
                    }
                    this.loading = true;
                    this.$post("/dynamic/query", {id: id}).then(res => {
                        this.dynamic = res.data;
                        if(this.dynamic.attributeList == undefined || this.dynamic.attributeList == null){
                            this.dynamic.attributeList = [];
                        }else if(this.dynamic.attributeList.length%2 == 1){
                            this.dynamic.attributeList.push({})
                        }
                        if (this.dynamic.subCategoryName) {
                            this.dynamic.industryCategory = this.dynamic.parentCategoryName + " " + this.dynamic.subCategoryName + " "
                        } else {
                            this.dynamic.industryCategory = this.dynamic.parentCategoryName
                        }
                        this.loading = false;
                    }).then(()=>{
                        this.getAuthorUser(this.dynamic.userId)
                    }).then(() =>{
                        this.getPreviewSrcList()
                    }).catch(() =>{
                        this.loading = false;
                    })
                    //获取评论和喜欢的人
                    this.getLikeList();
                    this.getCommentList();

                },
                getLikeList(){
                    //获取评论和喜欢的人
                    this.$post("/dynamic/like/getUserList",{dynamicId:this.dynamic.id}).then(res =>{
                        this.likeUserList = res.data.likeUserList
                    })
                },
                getCommentList(){
                    this.commentPage.dynamicId = this.dynamic.id;
                    this.$post("/dynamic/comment/queryPage", this.commentPage).then(res =>{
                        this.commentList = res.data.rows;
                        this.commentPage.count = res.data.count;
                    })
                },
                changeCommentPage(page){
                    this.commentPage.page = page;
                    this.getCommentList();
                },
                handleCommand(command) {
                    switch (command) {
                        case "0":
                            break;
                        case "1":
                            this.openComplaintDialog();
                            break;

                    }
                }
                ,
                openComplaintDialog() {

                }
                ,
                getPreviewSrcList() {
                    let imgList = document.querySelectorAll('#dynamic-context img');
                    console.log(imgList,"imgList")
                    for (let i = 0; i < imgList.length; i++) {
                        imgList[i].addEventListener("click",(e)=>{
                                this.previewImage(e,i)
                        });
                        this.previewImages.push(imgList[i].src)
                    }
                },
                previewImage(e,index) {
                    this.previewIndex = index;
                    this.showViewer =true;
                }
                ,
                closeViewer(){
                  this.showViewer =false;
                },
                addLike() {
                    if (this.dynamic.likeId != null) {
                        this.$post("/dynamic/like/delete", {dynamicId: this.dynamic.id}).then(res => {
                            this.dynamic.likeId = null;
                            this.dynamic.likeQuantity = res.data;
                            this.getLikeList()
                        })
                    } else {
                        this.$post("/dynamic/like/add", {dynamicId: this.dynamic.id}).then(res => {
                            this.dynamic.likeId = 1;
                            this.dynamic.likeQuantity = res.data;
                            this.getLikeList()
                        })
                    }

                },
                addCollection() {
                    if (this.dynamic.collectionId != null) {
                        this.$post("/dynamic/collection/delete", {dynamicId: this.dynamic.id}).then(res => {
                            this.$set(this.dynamic, "collectionId", null)
                        })
                    } else {
                        this.$post("/dynamic/collection/add", {dynamicId:this. dynamic.id}).then(res => {
                            this.$set(this.dynamic, "collectionId", 1)
                        })
                    }

                },
                addComment(visibility){
                    if(this.commentContent){
                        this.$post("/dynamic/comment/add", {dynamicId: this.dynamic.id, content :this.commentContent , visibility: visibility}).then(res => {
                            this.getCommentList();
                            this.dynamic.commentQuantity = res.data
                            this.commentContent = ''
                        })
                    }
                },
                replyComment(toUserId){
                    if(this.replyCommentContent){
                        this.$post("/dynamic/comment/add", {dynamicId: this.dynamic.id, content :this.replyCommentContent , toUserId: toUserId}).then(res => {
                            this.getCommentList();
                            this.dynamic.commentQuantity = res.data
                            this.replyCommentContent = ''
                        })
                    }
                },
                getRecommendList() {
                    this.$post("/dynamic/getRecommendList").then(res => {
                        this.recommendList = res.data;
                        this.recommendList .rows.forEach(u => {
                            u.userHeadUrl =util.setDefaultHead(u.userHeadUrl);
                        })
                    }).catch(() => {
                    })
                },
                openDynamicDetails(id) {
                    this.$route.query.id = id
                    this.getDetails()
                    this.getRecommendList()
                },
                showComment(){
                    document.getElementById("comment").scrollIntoView();
                }
            }
        ,
        mounted() {
            this.getUserInfo()
            this.getDetails()
            this.getRecommendList()

        }
    }
</script>

<style>
    @import '/src/assets/tinymce/skins/content/default/content.min.css';

    .dynamic-details .dynamic-details-container {
        padding: 20px 20px 14px;
    }

    .dynamic-details .dynamic-details-container .bac-container-title {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 0px;
    }

    .dynamic-details .dynamic-details-container-body {
        overflow: hidden;
    }

    /**
       标题
        */
    .dynamic-details .dynamic-title {
        margin: 0;
        color: #303133;
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 5px;
        line-height: 30px;
    }

    .dynamic-details .el-tag--plain {
        position: relative;
        top: -2px;
        margin-right: 2px;
    }

    .dynamic-details .dynamic-context {
        margin-bottom: 10px;
        width: 100%;
        min-height: 300px;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .dynamic-details .dynamic-context img {
        max-width: 100%;
        cursor: pointer;
    }

    /**
       个人信息
        */
    .dynamic-details-container .dynamic-basic-data {
        line-height: 20px;
        font-size: 13px;
        display: inline-block;
        flex-direction: row;
        color: #909399;
        margin: 2px 0 20px;

    }

    .dynamic-details-container .dynamic-username {

    }

    .dynamic-details-container .dynamic-basic-data .el-link--inner {
        font-size: 12px;
        color: #909399;
    }

    .dynamic-details-container .dynamic-basic-data .el-link--inner:hover {
        color: #1387E9;
    }

    .dynamic-details-container .dynamic-basic-data span {
        margin-right: 5px;
        float: left;
    }

    /**
     属性
    **/
    /*.dynamic-details .goods-item-attribute {*/
        /*padding: 5px 6px;*/
        /*border-radius: 2px;*/
        /*margin: 0 10px;*/

    /*}*/

    /*.dynamic-details .goods-item-attribute ul {*/
        /*overflow: hidden;*/
        /*!*border-top: 1px solid #E4E7ED;*!*/
        /*!*border-left: 1px solid #E4E7ED;*!*/
        /*!*border-right: 1px solid #E4E7ED;*!*/
    /*}*/

    /*.dynamic-details .goods-item-attribute li {*/
        /*font-size: 14px;*/
        /*!*float: left;*!*/
        /*!*width: calc(50% - 1px);*!*/
        /*!*border-bottom: 1px solid #E4E7ED;*!*/
        /*line-height: 30px;*/
        /*height: 30px;*/
        /*display: flex;*/
    /*}*/


    /*!*.dynamic-details .goods-item-attribute li:nth-child(2n) {*!*/
    /*!*border-left: 1px solid #E4E7ED;*!*/
    /*!*}*!*/

    /*.dynamic-details .attribute-value {*/
        /*overflow: hidden;*/
        /*white-space: nowrap;*/
        /*text-overflow: ellipsis;*/
        /*text-overflow: ellipsis; !* IE/Safari *!*/
        /*-ms-text-overflow: ellipsis;*/
        /*-o-text-overflow: ellipsis; !* Opera *!*/
        /*padding-left: 5px;*/
        /*width: 75%;*/
    /*}*/

    /*.dynamic-details .attribute-name {*/
        /*font-weight: 500;*/
        /*display: inline-block;*/
        /*width: 25%;*/
        /*!*text-align: right;*!*/
        /*!*background-color: #f6f6f6;*!*/
        /*padding-right: 5px;*/
        /*!*border-right: 1px solid #E4E7ED;*!*/
    /*}*/



    /**
    喜欢框
    */
    .dynamic-details .good-container {
        overflow: hidden;
        margin: 15px 0px 15px;
        font-size: 12px;
        line-height: 30px;
        border-radius: 2px;
    }

    .dynamic-details .good-container li {
        float: left;
        line-height: 20px;
    }

    .dynamic-details .good-container li i {
        font-size: 20px;
    }

    /**
    评论框
     */
    .dynamic-details .comment {
        padding: 10px 10px;
        border-radius: 2px;
    }


    .dynamic-details .comment-add ul {
        list-style: none;
        margin: 0px auto 5px;
        padding: 5px 0;
        overflow: hidden;
        line-height: 32px;
    }

    .dynamic-details .comment-add li {
        float: left;
        margin-right: 10px;
        height: 32px;
    }

    .dynamic-details .comment-add li:nth-child(2) {
        width: 66%;
    }

    .dynamic-details .comment-body {
        list-style: none;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        font-size: 12px;
        width: 100%;
    }

    .dynamic-details .comment-item {
        overflow: hidden;
        padding: 1px 0;
    }


    .dynamic-details .comment-item .el-avatar {
        margin-top: 3px;
    }

    .dynamic-details .comment-item p {
        margin: 0px;
        padding: 0px;
    }

    .dynamic-details .comment-context {
        line-height: 23px;
    }

    .dynamic-details .comment-context-footer {
        line-height: 16px;
        overflow: hidden;
    }

    .dynamic-details .comment-context-footer p {
    }

    .dynamic-details .comment-operate {
        float: right;
    }

    .dynamic-details .comment-time {
        float: left;
        color: #909399;
    }

    .dynamic-details .comment .el-link--inner {
        font-size: 12px;
    }

    .dynamic-details .dynamic-details-container .el-link {
        vertical-align: unset;
    }

    .dynamic-details .comment .el-pagination {
        text-align: center;
    }

    .dynamic-details .comment .el-divider--horizontal {
        margin: 15px 0;
        background-color: #EBEEF5;
    }

    .dynamic-details .el-divider--horizontal .el-divider__text {
        color: #909399;
    }

    /**
    左边操作按钮
     */
    .dynamic-details .dynamic-container-operate {
        position: fixed;
        top: 216px;
        left: calc((100vw - 1032px) / 2 - 78px);
    }

    .dynamic-details .dynamic-container-operate li {
        text-align: center;
        margin-bottom: 10px;
        color: #909399;
        cursor: pointer;
    }

    .dynamic-details .dynamic-container-operate li:hover {
        color: #1387E9;
    }

    .dynamic-details .dynamic-container-operate li.is_active {
        color: #1387E9;
    }

    .dynamic-details .dynamic-container-operate li i {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        line-height: 48px;
        font-size: 25px;
        border-radius: 50%;
        -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
        background-color: #fff;
    }

    .dynamic-details .dynamic-container-operate li span {
        margin-top: 5px;
        font-size: 14px;
        display: block;
    }

    /**
     属性
    **/

    .dynamic-details .goods-item-attribute ul {
        overflow: hidden;
        border-top: 1px solid #E4E7ED;
        border-left: 1px solid #E4E7ED;
        border-right: 1px solid #E4E7ED;
        margin-bottom: 20px;
    }

    .dynamic-details .goods-item-attribute li {
        font-size: 12px;
        float: left;
        width: calc(50% - 1px);
        border-bottom: 1px solid #E4E7ED;
        line-height: 29px;
        height: 29px;
        display: flex;
    }


    .dynamic-details .goods-item-attribute li:nth-child(2n) {
        border-left: 1px solid #E4E7ED;
    }

    .dynamic-details .attribute-value {
        width: 70%;
    }

    .dynamic-details .attribute-value .el-link--inner {
        padding-left: 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-overflow: ellipsis; /* IE/Safari */
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis; /* Opera */
        font-size: 12px;
        max-width: 172px;
    }

    .dynamic-details .attribute-name {
        font-weight: 500;
        display: inline-block;
        width: 30%;
        text-align: right;
        background-color: #f9f9f9;
        padding-right: 5px;
        border-right: 1px solid #E4E7ED;
    }


    /**
推荐列表
*/
    .dynamic-details .dynamic-list-mini {
        padding: 0px 10px 10px;
        margin: 0;
    }

    .dynamic-details .dynamic-list-mini .el-tag {
        margin-right: 5px;
    }
    .dynamic-details .dynamic-list-mini .title-div {
        line-height: 28px;
        overflow: hidden;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        cursor: pointer;

    }
    .dynamic-details .dynamic-list-mini .title {
        font-size: 13px;
        font-weight: 600;
    }
    .dynamic-details .dynamic-list-mini .title:hover{
        color: #1387E9;
    }


    .add-dynamic-type .el-link--inner {
        font-size: 14px;
        margin: 10px 16px;
        text-align: center;
        vertical-align: middle;
    }

    .add-dynamic-type .el-link--inner span {
    }

    .add-dynamic-type i {
        font-size: 34px;
        display: block;
    }

    /**
  用户信息
   */
    .dynamic-details .user-info {
        text-align: center;
        margin: 20px 0 10px;
        font-size: 13px;
    }

    .dynamic-details .user-info li {
        margin-top: 5px;
        line-height: 20px;
    }

    .dynamic-details .user-info .user-name {
        font-size: 15px;
        font-weight: 600;
    }

    .dynamic-details .user-info .user-position, .user-info .user-company {
        color: #606266;
        font-weight: 500;
    }

    .dynamic-details .user-info .user-data {
        margin-top: 10px;
    }

    .dynamic-details .user-info .user-data .user-data-item {
        display: inline-block;
        padding: 0 3px;
        color: #606266;
    }

    .dynamic-details .user-info .user-data .user-data-item .el-link--inner {
        color: #303133;
        font-weight: 600;
    }

    .dynamic-details .user-info .user-data-item .el-divider--vertical {
        height: 2em;
        vertical-align: unset;
    }
</style>
